<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json2测试</title>
    <script src="../js/jquery-2.1.4.min.js"></script>
    <link href="../css/bootstrap.css" rel="stylesheet">
    <script src="../js/bootstrap.js"></script>
    <script>
        var JSONObject = {
            "name": "st",
            "type": "company",
            "employee": [{
                "name": "changjing",
                "type": "trainee",
                "age": 23
                },
                {
                    "name": "xiaowen",
                    "type": "trainee",
                    "age": 21
                },
                {
                    "name": "lanlan",
                    "type": "trainee",
                    "age": 27
                }
            ]
        }
       // alert(JSONObject.employee[0].name);
      $(function () {
          document.write('<table> <caption>employee table</caption> <tr>');
           document.write(' <th>name</th> <th>type</th> <th>age</th> </tr>');
           for(var i=0;i<JSONObject.employee.length;i++){
               document.write('<tr><td>'+JSONObject.employee[i].name+'</td><td>'+JSONObject.employee[i].type+'</td><td>'+JSONObject.employee[i].age+'</td></tr>');
           }
           document.write('</table>');
           $('caption').css({'font-weight':"bold"})
           $('table').css({"border-collapse":"collapse"});
           $('table th,td').css({"border":"solid 1px black"});
        });

        //定义table样式
    </script>
 <!-- <style>
      table{
          border-collapse: collapse;
      }
        table td,th{
            border: solid 1px black;

        }

    </style>-->
</head>
<body>
<!--<table>
    <caption>employee table</caption>
    <tr>
        <th>name</th>
        <th>type</th>
        <th>age</th>
    </tr>
    <tr>
        <td>changjing</td>
        <td>trainee</td>
        <td>23</td>
    </tr>
    <tr>
        <td>xiaowen</td>
        <td>trainee</td>
        <td>21</td>
    </tr>
    <tr>
        <td>lanlan</td>
        <td>trainee</td>
        <td>27</td>
    </tr>
</table>-->
</body>
</html>